<!-- Range Management 范围管理 -->
<template>
  <div class="container-material-purchasing">
    <div class="wrapper" id="wrapper">
      <!-- 头部 -->
      <van-nav-bar
        title="范围管理"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <div class="nav_right" slot="right">
          <img src="../../../assets/imgs/screen.png" alt>
        </div>
      </van-nav-bar>
      <!-- tab栏 -->
      <van-tabs class="lists"  @click="sel_show = false" v-model="active" :line-width="186" :line-height="3" @change="onActive" title-active-color="#5892FF">
        <van-tab title="采购列表">
          <!-- 采购列表 -->
          <van-list
            v-model="isLoading"
            :finished="finished"
            finished-text="没有更多了"
            :offset="100"
            @load="onRefresh"
            class="buy_lists"
          >
            <van-cell class="li" v-for="(item,index) in rangeList" :key="index"  @click="sel_show = false">
              <div class="scope-status">
                <!-- {{item.WorkStatus}} -->
                <img src="../../../assets/imgs/scope_load.png" v-if="item.Status==0">
                <img src="../../../assets/imgs/scope_ing.png" v-if="item.Status==2">
                <img src="../../../assets/imgs/scope_done.png" v-if="item.Status==1">
              </div>
              <div class="lis_left">
                <span>采购批次：{{item.Code}}</span>
                <span>发起日期:{{item.dCreateTime}}</span>
                <span>需用日期:{{item.DemandTime}}</span>
              </div>

              <div class="lis_right" @click="onPurchase(item.ID)">
                <button>采购详情</button>
                <span>申请人:{{item.ApplyPersonName}}</span>
              </div>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab title="变更列表" class="change">
          <van-tabs v-model="changeActive" type="card" swipeable>
            <van-tab :title="`待接收（${dataIngCount}）`">
              <van-row justify="space-between">
                <van-col span="6">编码</van-col>
                <van-col span="2">楼栋</van-col>
                <van-col span="4">专业</van-col>
                <van-col span="2">楼层</van-col>
                <van-col span="5">变更主题</van-col>
                <van-col span="5">截止日期</van-col>
              </van-row>
              <div class="change_content">
                <van-list
                  v-model="changeLoading1"
                  :finished="changeInished1"
                  finished-text="没有更多了"
                  :offset="100"
                  @load="getChangeData(0)"
                  :immediate-check="false"
                  class="change_con_list active"
                >
                  <van-row v-for="(item, index) in dataIng" :key="index" :style="{background: index%2 === 0 ? '#f5f5f5' : ''}">
                    <div class="content-w" @click.stop="onChangeDetel(item.ID)">
                      <van-col span="6">{{item.Code}}</van-col>
                      <van-col span="2">{{item.Building}}</van-col>
                      <van-col span="4">{{item.Specialty}}</van-col>
                      <van-col span="2">{{item.Floor}}</van-col>
                      <van-col span="5">{{item.Theme}}</van-col>
                      <van-col span="5">{{item.EndTime}}</van-col>
                    </div>
                  </van-row>
                </van-list>
              </div>
            </van-tab>
            <van-tab :title="`处理中（${dataHandleCount}）`">
              <van-row justify="space-between">
                <van-col span="6">编码</van-col>
                <van-col span="2">楼栋</van-col>
                <van-col span="4">专业</van-col>
                <van-col span="2">楼层</van-col>
                <van-col span="5">变更主题</van-col>
                <van-col span="5">截止日期</van-col>
              </van-row>
              <div class="change_content">
                <van-list
                  v-model="changeLoading2"
                  :finished="changeInished2"
                  finished-text="没有更多了"
                  :offset="100"
                  @load="getChangeData(1)"
                  :immediate-check="false"
                  class="change_con_list active"
                >
                  <van-row v-for="(item, index) in dataHandle" :key="index" :style="{background: index%2 === 0 ? '#f5f5f5' : ''}">
                    <div class="content-w" @click.stop="onChangeDetel(item.ID)">
                      <van-col span="6">{{item.Code}}</van-col>
                      <van-col span="2">{{item.Building}}</van-col>
                      <van-col span="4">{{item.Specialty}}</van-col>
                      <van-col span="2">{{item.Floor}}</van-col>
                      <van-col span="5">{{item.Theme}}</van-col>
                      <van-col span="5">{{item.EndTime}}</van-col>
                    </div>
                  </van-row>
                </van-list>
              </div>
            </van-tab>
            <van-tab :title="`已处理（${dataOverCount}）`">
              <van-row justify="space-between">
                <van-col span="6">编码</van-col>
                <van-col span="2">楼栋</van-col>
                <van-col span="4">专业</van-col>
                <van-col span="2">楼层</van-col>
                <van-col span="5">变更主题</van-col>
                <van-col span="5">截止日期</van-col>
              </van-row>
              <div class="change_content">
                <van-list
                  v-model="changeLoading3"
                  :finished="changeInished3"
                  finished-text="没有更多了"
                  :offset="100"
                  @load="getChangeData(2)"
                  :immediate-check="false"
                  class="change_con_list active"
                >
                  <van-row v-for="(item, index) in dataOver" :key="index" :style="{background: index%2 === 0 ? '#f5f5f5' : ''}">
                    <div class="content-w" @click.stop="onChangeDetel(item.ID)">
                      <van-col span="6">{{item.Code}}</van-col>
                      <van-col span="2">{{item.Building}}</van-col>
                      <van-col span="4">{{item.Specialty}}</van-col>
                      <van-col span="2">{{item.Floor}}</van-col>
                      <van-col span="5">{{item.Theme}}</van-col>
                      <van-col span="5">{{item.EndTime}}</van-col>
                    </div>
                  </van-row>
                </van-list>
              </div>
            </van-tab>
          </van-tabs>
        </van-tab>
      </van-tabs>
      <!-- 搜索模块 -->
      <div class="search_model"  @click="sel_show = false">
        <div class="search">
          <van-icon class="search_icon" name="search"></van-icon>
          <input class="search_text" type="text" placeholder="楼栋、专业、楼层、资源" v-model="options.Name">
        </div>
        <!-- <van-cell-group>
          <van-field
            value="楼栋、专业、楼层、资源"
            left-icon="contact"
          />
        </van-cell-group> -->
        <button class="search_btn" @click.prevent="searchFunc">搜索</button>
      </div>

      <!-- 筛选内容 -->
      <popup-screening ref="popupScreening" :showPopup="sel_show" :showTask="false" :showResourceName="false" @showPopup="(val)=>{sel_show=val}" @searchFrom="recordCheck"></popup-screening>
      <!-- <div class="select_layer" v-show="sel_show">
        <van-collapse v-model="activeNames" accordion @change="changeCollapseItem">
          <van-collapse-item :title="buildName == '' ? '整栋楼栋' : buildName" name="1">
            <div slot="icon">
              <img class="icon_down" src="../../../assets/imgs/select_down.png">
            </div>
            <van-radio-group v-model="buildName">
              <van-radio v-for="(item,index) in BuildNameList" :key="index" @click="onSelBuild(item)" :name="item.text" class="my-radio">{{item.text}}</van-radio>
            </van-radio-group>
          </van-collapse-item>
          <van-collapse-item :title="specialty == '' ? '全部专业': specialty" name="2">
            <div slot="icon">
              <img class="icon_down" src="../../../assets/imgs/select_down.png">
            </div>
            <van-radio-group v-model="specialty">
              <van-radio v-for="(item, index) in SpecialtyList" :key="index" @click="onSelSpec(item)" :name="item.text" class="my-radio">
                {{item.text}}
              </van-radio>
            </van-radio-group>
          </van-collapse-item>
          <van-collapse-item :title="floor =='' ? '全部楼层' : floor" name="3">
            <div slot="icon">
              <img class="icon_down" src="../../../assets/imgs/select_down.png">
            </div>
            <van-radio-group v-model="floor">
              <van-radio v-for="(item, index) in FloorbyList" :key="index" @click="onSelFloor(item)" :name="item.text" class="my-radio">
                {{item.text}}
              </van-radio>
            </van-radio-group>
          </van-collapse-item>
        </van-collapse>
        <div class="btn">
          <button class="reset" @click=" resetFunc">重置</button>
          <div class="line"></div>
          <button class="check" @click="recordCheck">确认</button>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script type='textecmascript-6'>
import {
  getPurchaseList,
  getBuildList,
  getSpecialtyList,
  getFloorList,
  getChangeList,
  clearSel
} from "../../../assets/js/scopeManage.js";
import popupScreening from '@/components/common/DropdownScreening/popupScreening'

export default {
  components: {
    popupScreening
  },
  data() {
    return {
      options: {
        BuildName: "",
        Specialty: "",
        Floor: "",
        Name: "",
        page: 1,
        rows: 7
      },
      options2: {
        BuildName: "",
        Specialty: "",
        Floor: "",
        Name: "",
        page: 1,
        rows: 18
      },
      rangeList: [],
      ispull: true,
      BuildNameList: [], // 楼栋下拉
      SpecialtyList: [], // 专业下拉
      FloorbyList: [], // 楼层下拉
      buildName: '',//整栋模型
      specialty: '',//专业
      floor: '',//楼层
      sel_show: false,
      active: 0,
      changeActive: 0,
      activeNames: ["0"],

      isLoading: false,
      finished: false,
      changeLoading1: false,
      changeInished1: false,
      changeLoading2: false,
      changeInished2: false,
      changeLoading3: false,
      changeInished3: false,
      ingChangePage: 1,
      handleChangePage: 1,
      overChangePage: 1,

      //变更数据
      dataIng: [],//待接收
      dataIngCount:0,//总数
      dataHandle: [],//处理中
      dataHandleCount:0,
      dataOver: [],//已处理
      dataOverCount:0,
    };
  },
  created() {
    this.active = this.$route.query.active ? this.$route.query.active : 0
    getPurchaseList(this);
    getBuildList(this);
    getChangeList(this, 0)
    getChangeList(this, 1)
    getChangeList(this, 2)
  },
  methods: {
    getChangeData(p) {
      getChangeList(this, p);
    },
    // tab
    onActive() {
      this.options = {
        BuildName: "",
        Specialty: "",
        Floor: "",
        Name: "",
        page: 1,
        rows: 18
      };
      this.SpecialtyList = []; // 专业下拉
      this.FloorbyList = [];
      if (this.active == 1) {
        console.log('切换')
        console.log(this.dataIng)
        console.log(this.dataHandle)
        console.log(this.dataOver)
        // this.dataIng = [];
        // this.dataHandle = [];
        // this.dataOver = [];
        // getChangeList(this, 0);
        // getChangeList(this, 1);
        // getChangeList(this, 2);
      } else {
        this.rangeList = [];
        getPurchaseList(this);
      }
    },
    /**
     * @name 切换折叠面板时触发
     * @param {string | array} activeNames
     */
    changeCollapseItem(activeNames){
      console.log("==折叠面板 activeNames==", activeNames)
      switch (activeNames) {
        case "1":
          {
            getBuildList(this)
          }
          break;
        case "2":
          {
            if(this.buildName === ""){
              this.$toast({
                message: '请先选择楼栋！',
                className: "my-toast"
              });
              return;
            }
          }
          break;
        case "3":
          {
            if(this.buildName === "" || this.specialty === ""){
              this.$toast({
                message: '请先选择专业！',
                className: "my-toast"
              });
              return;
            }
          }
          break;
        case "4":
          {
            if(this.buildName === "" || this.specialty === "" || this.floor === ""){
              this.$toast({
                message: '请先选择楼层！',
                className: "my-toast"
              });
              return;
            }
          }
          break
        case "5":
          {
            if(this.buildName === "" || this.specialty === "" || this.floor === "" || this.resourceName === ""){
              this.$toast({
                message: '请先选择物资！',
                className: "my-toast"
              });
              return;
            }
          }
          break;
      
        default:
          break;
      }
    },
    // 楼层选项
    onSelFloor(e) {
      this.options.Floor = e.text;
      this.floor = e.text;
    },
    // 专业选项
    onSelSpec(e) {
      // if(this.buildName == ''){

      // }
      this.options.Specialty = e.text;
      this.specialty = e.text
    },
    // 楼栋选项
    onSelBuild(e) {
      console.log(this.BuildNameList)
       this.SpecialtyList = [];
      this.FloorbyList = [];
      this.specialty = ''
      this.floor = ''
      this.options.BuildName = e.text;
      this.buildName = e.text
    },
    // 下拉加载
    onRefresh() {
      // if (this.ispull) {
      //   this.options.page = this.options.page += 1;
      getPurchaseList(this);
      // } else {
      //   let timer = setTimeout(() => {
      //     this.isLoading = false;
      //     clearTimeout(timer);
      //     this.$message({
      //       type: "warning",
      //       message: "已没有更多数据",
      //       center: "true"
      //     });
      //   }, 200);
      // }
    },
    // 返回按钮
    onClickLeft() {
  
      this.$router.push({path: '/nav/to/index'});
      
    },
    // 筛选按钮
    onClickRight() {
      this.sel_show = !this.sel_show;
    },
    // 重置函数
    resetFunc() {
      // this.options = {
      //   BuildName: "",
      //   Specialty: "",
      //   Floor: "",
      //   Name: "",
      //   page: 1,
      //   rows: 5
      // };
    },
    // 确认选择
    recordCheck(v) {
      this.options.page = 1;
      this.ingChangePage = 1;
      this.handleChangePage = 1;
      this.overChangePage = 1;
      Object.assign(this.options, v)
      if (this.active == 1) {
        this.dataIng = [];
        this.dataHandle = [];
        this.dataOver = [];
        getChangeList(this, 0);
        getChangeList(this, 1);
        getChangeList(this, 2);
      } else {
        this.rangeList = [];
        getPurchaseList(this);
      }
    },
    //搜索函数
    searchFunc() {
      if (this.active == 1) {
        this.ingChangePage = 1;
        this.handleChangePage = 1;
        this.overChangePage = 1;
        this.dataIng = [];
        this.dataHandle = [];
        this.dataOver = [];
        this.getChangeData(0);
        this.getChangeData(1);
        this.getChangeData(2);
      } else {
        this.rangeList = [];
        this.options.page = 1;
        getPurchaseList(this);
      }
    },
    // 变更数据处理
    pushData(data, func) {
      data.Detiel.forEach(element => {
        let item = {
          Code: element.Code,
          Building: element.Building ? element.Building : "/",
          Specialty: element.Specialty ? element.Specialty : "/",
          Floor: element.Floor ? element.Floor : "/",
          Theme: element.Theme ? element.Theme : "/",
          EndTime: element.EndTime
            ? require("moment")(element.EndTime).format("YYYY/MM/DD")
            : "/",
          DoNum: element.DoNum + "/" + element.TotalDoNum,
          ID: element.ID
        };
        func(item);
      });
    },
    // 采购详情
    onPurchase(id) {
      this.$router.push({ path: "/purchaseDetails", query: { id ,active:this.active} });
    },
    // 变更详情
    onChangeDetel(id) {
      this.$router.push({ path: "/projectChangeDetails", query: { id ,active:this.active} });
    }
  },
  watch: {
    "options.BuildName"(val) {
      if (val != "") {
        clearSel(this, 1);
        getSpecialtyList(this);
      }
    },
    "options.Specialty"(val) {
      if (val != "") {
        clearSel(this, 2);
        getFloorList(this);
      }
    }
  }
};
</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
.container-material-purchasing {
  width: 100%;
  height: 100%;
}

.change_content .van-col {
  // overflow: hidden;
  line-height: 40px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style lang="stylus" rel="stylesheet/stylus" >
@import '../../../assets/stylus/variable';
@import "~@/assets/css/resetVant.css";

#wrapper {
  width: 100%;
  height: 100%;
  background-color: #fff;

  // 头部样式
  .van-nav-bar {
    width: 100%;
    height: 88px;
    border-bottom: 1px solid #E5E5E5;

    .van-nav-bar__title, .van-nav-bar__left, .van-nav-bar__right {
      color: #000;
      height: 87px;
      line-height: 87px;
      font-size: $font-size-title;
      z-index: 10000;
    }

    .van-icon-arrow-left {
      color: #000;
      font-size: $font-size-title;
    }

    .van-nav-bar__text {
      color: #000;
      font-size: $font-size-title;
    }

    .nav_right {
      img {
        width: 41px;
        height: 35px;
      }
    }
  }

  .van-tab {
    height: 88px;
    border: none !important;
  }

  .change {
    .van-tab--active {
      background-color: #5892ff !important;
      color: #fff !important;
    }
  }

  .van-tabs {
    height: calc(100% - 178px);

    .change .van-tabs__content {
      padding-top: 65px;
    }

    .van-tabs__content {
      padding-top: 96px;
    }

    .van-tabs__wrap {
      height: 88px;

      .van-tabs__line {
        background-color: $color-bgc-1;
      }

      .van-tab {
        line-height: 88px;
        // color: #5892FF;
        font-size: $font-size-28;
        font-family:PingFang-SC-Bold;
        font-weight:600;
      }
    }

    // tab栏内容样式
    .van-tabs__content {
      height: calc(100% - 95px);

      .van-tab__pane {
        height: 100%;
      }
    }
  }

  .van-tabs--line {
    padding-top: 88px;
  }

  .search_model {
    position: absolute;
    top: 193px;
    // left: 24px;
    z-index: 10;
    display flex
    box-sizing border-box
    padding 0 24px
    justify-content space-between
    width 100%
    .search_icon {
      display inline-block
      position: absolute;
      top: 18px;
      left: 40px;
      font-size: 34px;
      color:#999999;
      font-weight: 700;
    }

    .search_text {
      display inline-block
      width: 530px;
      flex 1
      height: 64px;
      line-height 64px;
      padding-left: 65px;
      color: #999999;
      background-color: #F5F5F5;
      font-size: 28px;
      box-sizing: border-box;
      border-radius: 8px;
    }

    .search_btn {
      display inline-block
      width: 120px;
      height: 64px;
      color: #fff;
      background-color: #5892FF;
      border: none;
      border-radius: 8px;
      font-size:30px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
    }
  }

  // 采购栏样式
  .buy_lists {
    height: calc(100vh - 345px);
    padding: 20px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgba(246,248,250,1);
    .li {
      background-color: #fff;
    }
    .van-cell {
      margin-bottom: 20px;
      padding: 24px 20px;
      box-sizing: border-box;
      width: 702px;
      height: 180px;
      box-shadow: 0px 3px 7px 0px rgba(222, 234, 246, 0.75);
      border-radius: 8px;

      .van-cell__value {
        display: flex;
        justify-content: space-between;
        background: rgba(255, 255, 255, 1);
        overflow initial
      }

      .lis_left {
        span {
          display: block;
          font-size: $font-size-26;
          color: #666666;
        }

        span:first-child {
          font-size: $font-size-30;
          margin-bottom: 20px;
          margin-top: 10px;
          color: #333333;
        }

        span:last-child {
          margin-top: 15px;
        }
      }

      .lis_right {
        display: flex;
        justify-content: center;
        flex-direction: column;

        button {
          width: 180px;
          height: 50px;
          line-height: 50px;
          font-size: $font-size-30;
          color: #fff;
          background: rgba(88, 146, 255, 1);
          border: none;
          border-radius: 8px;
        }

        span {
          padding-top: 10px;
          padding-left: 10px;
          width: 180px;
          font-size: 24px;
          color: #999999;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  // 变更
  .change_lists {
    background-color: #F5F5F5;
    height: calc(100vh - 375px);

    ul {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }

  .select_layer {
    position: fixed;
    top: 126px;
    right: 24px;
    width: 352px;
    box-sizing: border-box;
    background-color: $color-bgc-2;
    opacity: 0.9;
    border-radius: 8px;
    padding: 10px 20px;
    z-index: 999;

    .van-hairline--top-bottom::after {
      border: none;
    }

    .van-hairline--top::after {
      border-top: none;
      border-bottom: 1px solid #737577;
    }

    .van-collapse {
      max-height: 909px;
      overflow-y: auto;
    }

    .van-collapse-item {
      .van-collapse-item__title--expanded::after {
        visibility: hidden;
      }
    }

    .van-collapse-item:first-child {
      border-bottom: 1px solid #737577;
    }

    .van-collapse-item__title {
      height: 86px;
      line-height: 86px;
      height: 86px;
      background-color: $color-bgc-2;

      .van-cell__title {
        font-size: 30px;
        color: #fff;
        text-align: left;
      }

      .van-cell__right-icon {
        color: transparent;
      }
    }

    .icon_down {
      position: absolute;
      top: 45px;
      right: 30px;
      width: 16px;
      height: 11px;
    }

    .van-collapse-item__content {
      padding: 0!important;
      background-color: $color-bgc-2;

      .van-cell {
        width: 100%;
        background-color: $color-bgc-2;
        color: #fff;
      }
    }

    .btn {
      width: 100%;
      height: 88px;
      padding: 19px 0;
      box-sizing: border-box;

      button {
        width: 49%;
        height: 50px;
        line-height: 50px;
        background-color: #222934;
        color: #fff;
        font-size: 30px;
        text-align: center;
        border: none;
      }

      .reset {
        // border-right: 1px dashed #fff;
      }

      .line {
        display: inline-block;
        width: 0px;
        height: 50px;
        border-left: 2px dashed #fff;
        vertical-align: top;
      }
    }
  }
  .select_layer .van-radio {
    line-height: 86px;
    height: 86px;
    border-bottom: 1px solid #737577;
  }
  .select_layer .van-radio .van-radio__label {
    color: #fff;
    font-size: 30px;
    vertical-align: baseline;
  }

  .select_layer:after {
    position: absolute;
    top: -0.379rem;
    right: 0.186667rem;
    content: '';
    width: 0px;
    height: 0px;
    border: 15px solid transparent;
    border-bottom: 15px solid $color-bgc-2;
    z-index: 9999;
  }

  // 列表样式
  .van-row {
    text-align: center;
    background-color: #5A92FF;
    padding: 22px 0;
    color: #FEFEFF;
    font-size: 26px;
    box-sizing: border-box;
  }

  .van-tabs__content {
    .change_content {
      .change_con_list {
        .listHeader {
          height: 50px;
          line-height: 50px;
          padding-left: 24px;
          background: rgba(229, 238, 255, 1);
          font-size: 24px;
        }

        .van-row {
          position: relative;
          background-color: #fff;
          height: 78px;
          // line-height: 56px;
          color: #333333;
          border-bottom: 1px solid #E5EEFF;
        }

        .van-row:last-child {
          border-bottom: none;
        }
      }
      

      // 左上角图标样式
      // .active {
      //   .van-row:nth-child(2):before, .van-row:nth-child(3):before {
      //     position: absolute;
      //     top: 0;
      //     left: 0;
      //     content: '';
      //     width: 0;
      //     height: 0;
      //     border: 28px solid transparent;
      //     border-top: 28px solid #5A92FF;
      //     border-left: 28px solid #5A92FF;
      //   }

      //   .van-row:nth-child(2):after, .van-row:nth-child(3):after {
      //     position: absolute;
      //     top: 2px;
      //     left: 5px;
      //     content: '滞';
      //     font-size: 20px;
      //     color: #fff;
      //   }
      // }
    }
  }
}
</style>
<style scoped>

.scope-status {
    position: absolute;
    left: -24px;
    top: -24px;
    z-index: 11;
  }

.scope-status img {
    width: 89px;
    height: 89px;
    display: block;
  }
  .container-material-purchasing >>> .van-tabs__nav--card .van-tab{
    color: #333;
  }
</style>
<style>
.container-material-purchasing .van-tabs__nav--card{
  border:none;
  /* height: 1000px; */
}
.container-material-purchasing .change_con_list{
    height: 100%;
    overflow: auto;

}
#wrapper .lists .van-tabs {
    height: calc(100% - 30px);
}
#wrapper .lists .van-tabs .van-tabs__content {
    height: calc(100% - 64px);
}
.change_content{
  height: calc(100% - 70px);
}
</style>

